<template>
  <div class="wrap">
    <div class="line">
      <div class="title">查询条件</div>
      <div class="search"></div>
    </div>
    <div class="option">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="16">
            <el-form-item label="年龄">
              <el-slider v-model="form.age_scope" range :min="age_scope[0]" :max="age_scope[1]">
              </el-slider>
            </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-tag v-if="form.age_scope">{{ form.age_scope[0] }} - {{ form.age_scope[1] }}岁</el-tag>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="16">
            <el-form-item label="身高">
              <el-slider v-model="form.height_scope" range :min="height_scope[0]" :max="height_scope[1]">
              </el-slider>
            </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-tag v-if="form.height_scope">{{ form.height_scope[0] }} - {{ form.height_scope[1] }}cm</el-tag>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="16">
          <el-form-item label="体重">
            <el-slider v-model="form.weight_scope" range :min="weight_scope[0]" :max="weight_scope[1]">
            </el-slider>
          </el-form-item>
        </el-col>
        <el-col :span="6">
             <el-tag v-if="form.weight_scope">{{ form.weight_scope[0] }} - {{ form.weight_scope[1] }}kg</el-tag>
          </el-col>
      </el-row>
        <el-row>
          <el-col :span="6">
             <el-form-item label="性别">
                  <el-select v-model="form.gender" placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in config.genders"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="婚况">
                <el-select v-model="form.choose_marriage_status" placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in config.marriage_list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学历">
                <el-select v-model="form.choose_education" placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in config.education_list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          <el-col :span="6">
            <el-form-item label="居住地">
              <el-cascader
                v-model="form.choose_address"
                :options="area"
                style="width: 100%"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年收入">
              <el-select v-model="form.choose_income" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in config.income_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="民族">
              <el-select v-model="form.choose_nation" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in config.nation_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生肖">
              <el-select v-model="form.choose_zodiac" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in config.zodiac_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="星座">
              <el-select v-model="form.choose_constellation" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in config.constellation_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="小孩情况">
              <el-select v-model="form.choose_child" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in config.child_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购房情况">
              <el-select v-model="form.choose_house" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in config.house_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购车情况">
              <el-select v-model="form.choose_car" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in config.car_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
      </el-row>
     
     

        <!-- <el-form-item label="高级搜索"
          ><el-input
            v-model="form.name"
            placeholder="请输入珍爱ID精准搜索"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="" >
        <el-button style="width:42%" @click="reset"><span>重置</span></el-button>
        <el-button style="width:42%;background-color: #f43c8a;color: #fff;" @click="query"><span>查询</span></el-button>
      </el-form-item>


      </el-form>
    </div>
    <!-- <div class="option">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="已选条件">
          <el-tag
            v-for="tag in tags"
            :key="tag"
            closable
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="list">
      <div class="col" v-for="item in list" :key="item.id">
        <item :item="item" />
      </div>
    </div>
    <div class="no_data" v-if="total == 0">
      <img src="@/assets/empty.png" />
     </div>
    <pagination
    v-if="total > 0"
      :total="total"
      :currentPage="currentPage"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      total: 0,
      currentPage: 1,
      
      list: [],
      form: { },
      config: {},
      area: [],
      age_scope:[18,80],
      height_scope:[130,220],
      weight_scope:[40,140],
      tags: ["猜你喜欢1", "猜你喜欢2", "猜你喜欢3"],
      config: {},
      area: [],
    };
  },
  components: {
    item: () => import("@/components/item.vue"),
    pagination: () => import("@/components/pagination.vue"),
  },
  mounted() {
    this.getConfig();
    this.getArea();
    this.getList();
    this.getConfig();
    this.getArea();
  },

  methods: {
    getConfig() {
      this.$post("member/config").then((res) => {
        this.config = res.data;
      });
    },
    getArea() {
      this.$post("index/area").then((res) => {
        this.area = res.data;
      });
    },

    reset(){
      this.form = {}
      this.form.age_scope = this.age_scope
      this.form.height_scope = this.height_scope
      this.form.weight_scope = this.weight_scope

      this.currentPage = 1
      this.total = 0
    },
    query(){
      // console.log(this.form)
      this.getList()
    },
    getList() {
      this.form.page = this.currentPage
      this.form.rows = 20

      this.$post("member/list", this.form).then(
        (res) => {
          this.list = res.data.data;
          this.total = res.data.total;
        }
      );
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    genderHandleClose(gender){
        this.form.gender = gender
    }
  },
};
</script>

<style scoped lang="scss">
:deep .el-slider__bar{
  background-color: #ef3e91;
}
:deep .el-slider__button{
  background-color: #ef3e91;
  border-color: #ef3e91;
}
.line {
  height: 70px;
  background: #ffffff;
  border: 1px solid #ebebeb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  margin-top: 20px;
  position: relative;
  &::before {
    content: "";
    width: 4px;
    height: 18px;
    background: linear-gradient(-89deg, #ef3e91, #f4743c);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .title {
    font-size: 20px;
  }
  .search {
    display: flex;
    align-items: center;
    font-size: 14px;
    .flex {
      border-radius: 4px;
      border: 1px solid #c6c6c6;
      display: flex;
      align-items: center;
      padding-right: 14px;
    }
  }
  .el-icon-search {
    font-size: 18px;
  }
}
.option {
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 10px;
}
.list {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
  margin-top: 10px;
  .col {
    width: 25%;
    padding: 10px;
  }
}
.no_data{
  text-align: center;
  padding: 100px 0;
}

:deep .el-form-item {
  margin-bottom: 0;
  padding: 5px 0;
}
.el-select {
  margin-right: 10px;
}

:deep .el-tag {
  margin-right: 10px;
  background-color: #fff;
  border-color: #f43c8a;
  height: 30px;
  line-height: 26px;
  font-size: 12px;
  color: #f43c8a;
  border-radius: 40px;
  padding: 0 15px;
  .el-tag__close {
    color: #f43c8a;
  }
  .el-tag__close:hover {
    color: #fff;
    background-color: #f43c8a;
  }
}
:deep .base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .block {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
    .el-slider {
      width: 180px;
    }
  }
  .el-select {
    margin-right: 0;
    width: 160px;
  }
}
.search {
  display: flex;
  align-items: center;
  .name {
    width: 200px;
  }
  .btn {
    margin-left: 20px;
    width: 120px;
    height: 40px;
    background: linear-gradient(-89deg, #ef3e91, #f4743c);
    border-radius: 4px;
    text-align: center;
    color: #fff;
  }
}

@media screen and (max-width: 768px) {
  .base {
    display: block;
    div {
      margin-bottom: 10px;
    }
    .el-select {
      width: 100%;
    }
    .el-cascader {
      width: 100%;
    }
  }
  .list {
    margin: -5px;
    .col {
      width: 50%;
      padding: 5px;
    }
  }
}
</style>
